import React, {useEffect, useState} from 'react';
import ProForm, {ProFormSelect, ProFormText} from "@ant-design/pro-form";
import {message, Modal,Skeleton} from "antd";
import {addPermissionData, getPermissionData, permissionDetail, updatePermission} from "@/services/permission";

const CreateOrEdit = (props) => {
  const {isModalVisible} = props;
  const {uid} = props;
  const {isShowModal} = props;
  const {actionRef} = props;

  const type = uid === undefined ? "添加":"编辑"

  // 修改 权限路由详情的状态设置
  const [initialValues,setInitialValues] = useState(undefined)

  // 修改 获取dataTree
  const getDataTree = async () => {
      const res = await getPermissionData()
      const data = res.data.map( item => {
        return {
          label: item.cn_name,
          value: item.id,
        }
      })
      return data
  }

  // 修改 打开显示模态框 获取用户数据
  useEffect(async () => {
    if (uid !== undefined) {
      const response = await permissionDetail(uid);
      setInitialValues({
        cn_name: response.data.cn_name,
        name:response.data.name,
        pid:response.data.pid
      })
    }
  },[])


  // 执行提交- 添加、修改
  const handleSubmit = async (data) => {
    let response = {}
    if (uid === undefined) { // 添加
      data.guard_name = 'api';
      response = await addPermissionData(data)
    }else { // 編輯
      response = await updatePermission(uid,data)
    }

    if (response.status === undefined) {
      actionRef.current.reload()
      message.success(type+'路由成功')
      isShowModal(false)
    }
  }

  return (
    <Modal title={type + "权限路由"}
           visible={isModalVisible}
           onCancel={() => isShowModal(false)}
           destroyOnClose={true}
           footer={false}>
      {
        initialValues === undefined && uid !== undefined ? <Skeleton active /> : <ProForm
          onFinish={async (a) => {handleSubmit(a)}}
          initialValues={initialValues}
          submitter={{
            searchConfig: {
              submitText: '提交',
            },
            render: (_, dom) => dom.pop(),
            submitButtonProps: {
              size: 'middle',
              style: {
                width: '100%',
              },
            },
          }}
        >
          <ProFormText
            name="cn_name"
            label="路由名称"
            placeholder="请输入路由名称"
            rules={[
              {
                required: true,
                message: '请输入路由名称',
              },
            ]}
          />
          <ProFormSelect
            name="pid"
            label="父级路由"
            request={ () =>  getDataTree()}
            placeholder="请选择一个父级路由"
            rules={[{ required: true, message: '父级路由必选！' }]}
          />
          {
            uid === undefined ? <ProFormText
              name="name"
              label="请输入路由地址"
              rules={[
                {
                  required: true,
                  message: '路由地址必填',
                },
              ]}
            /> : ''
          }

        </ProForm>
      }
    </Modal>
  );
};

export default CreateOrEdit;
